<template>
  <a-drawer
    title="编辑合同编号"
    :maskClosable="true"
    :visible="visible"
    :width="350"
    @close="onCancel"
    :body-style="{
      height: 'calc(100% - 110px)',
      overflowY: 'auto',
      paddingBottom: '80px',
    }"
  >
    <section class="content">
      <a-row :gutter="[12, 24]">
        <template v-for="(item, index) of dataList" :key="index">
          <a-col :span="dataList.length > 1 ? 20 : 24">
            <a-select
              style="width: 100%"
              :value="item.type"
              @change="(val) => handleTypeChange(val, index)"
            >
              <a-select-option value="date">日期</a-select-option>
              <a-select-option value="txt">固定文本</a-select-option>
              <a-select-option
                value="order"
                v-if="!dataTypeArr.includes('order') || item.type === 'order'"
              >
                序号
              </a-select-option>
            </a-select>
          </a-col>
          <a-col span="4" v-show="dataList.length > 1">
            <a-button type="link" danger @click="handleItemRemove(index)">
              <template #icon>
                <MinusCircleOutlined />
              </template>
            </a-button>
          </a-col>
        </template>
        <a-col :span="24">
          <a-button type="dashed" style="width: 100%" @click="handleItemAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            添加
          </a-button>
        </a-col>
      </a-row>
    </section>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onCancel"> 取消 </a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 保存 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, watch, reactive, toRefs, computed } from "vue";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";

/**
 const RULE_OPTIONS = [
  { label: "日期", value: "date" },
  { label: "固定文本", value: "txt" },
  { label: "序号", value: "order" },
]; 
 */
const DATE_OPTION = {
  type: "date",
  condition_date: "date_1",
  condition_time: "time_1",
};
const TXT_OPTIONS = { type: "txt", condition_txt: "固定文本" };
const ORDER_OPTIONS = {
  type: "order",
  condition_order: "order_1",
  condition_num: 3,
  condition_start: 1,
};

const TYPE_DEFAULT = {
  date: DATE_OPTION,
  txt: TXT_OPTIONS,
  order: ORDER_OPTIONS,
};

export default defineComponent({
  name: "EditContractNo",
  components: { MinusCircleOutlined, PlusOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      dataList: [],
    });

    const dataTypeArr = computed(() => state.dataList.map((item) => item.type));

    /** 选择框变化 */
    const handleTypeChange = (value, index) => {
      state.dataList[index] = { ...TYPE_DEFAULT[value] };
    };

    /** 添加条目 */
    const handleItemAdd = () => {
      state.dataList.push(DATE_OPTION);
    };

    /** 移除条目 */
    const handleItemRemove = (index) => {
      state.dataList.splice(index, 1);
    };

    /** 保存 */
    const onSubmit = () => {
      emit("success", JSON.parse(JSON.stringify(state.dataList)));
    };

    /** 初始化 */
    const init = () => {
      state.dataList = JSON.parse(JSON.stringify(props.data));
    };
    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        }
      }
    );

    /** 关闭 */
    const onCancel = () => {
      emit("cancel");
    };
    return {
      dataTypeArr,
      ...toRefs(state),
      handleTypeChange,
      handleItemRemove,
      handleItemAdd,
      onCancel,
      onSubmit,
    };
  },
});
</script>
